<template>
	<view class="container">
		<view class="head">
			<video class="video" autoplay="true" :src="video.videoUrl"></video>
			<view class="tabs">
				<view class="tab " :class="[tabIndex == 1 ? 'active' : '']" @click="tabIndex = 1"><view>简介</view></view>
				<view class="tab" :class="[tabIndex == 2 ? 'active' : '']" @click="tabIndex = 2">
					<view>
						评论
						<text>({{commentList.length}})</text>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-view" scroll-y>
			<view v-if="tabIndex==1" class="c">
				<view class="user">
					<view class="left" @click="toPersonHome(video.author.id)">
						<image class="avatar" :src="video.author.portrait ? video.author.portrait : 'https://img0.baidu.com/it/u=1240550681,1913058023&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'" />
						<view class="name">{{video.author.userName}}</view>
					</view>
					<view class="btn" v-if="currentUser.id != video.userId" @click="attentionAuth()">
						<view v-if="!attentionFlag">
							<uni-icons  class="icon" color=" #ffffff" type="plusempty" size="12"></uni-icons>
							关注
						</view>
						<view v-else>
							已关注
						</view>
					</view>
					<!-- 	<view v-else class="btn btn1">
							已关注
					</view> -->
				</view>
				<view class="video-title">{{video.videoTitle}}</view>
				<view class="video-num">播放量{{video.browseCount}}</view>
				<view class="tags">
					<view @click="goTagNews(item)" class="t" v-for="item in tagList">{{item.tagName}}</view>
				</view>
				<view class="oper">
					<!-- 动态绑定样式 -->
					<view class="item">

						<image v-if="ifLike" @click="cancelLike()"  class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/zan1.png" mode="widthFix" />
						<image v-else @click="like()" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/zan0.png" mode="widthFix" />
						<view class="">{{video.likeCount}}</view>
					</view>
					<view class="item">
						<!-- 点踩和取消点踩需要补充 -->
						<image v-if="ifDisLike" @click="cancelDisLike()" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon111.png" mode="widthFix" />
						<image v-else @click="disLike()" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon111_n.png" mode="widthFix" />
						<view class="">踩</view>
					</view>
					<view class="item">
						<image v-if="ifCollect" @click="cancelCollectVideo()" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon16-active.png" mode="widthFix" />
						<image v-else class="img" @click="collectVideo()" src="https://m.nocexpo.com/statics/js/modules/h5/img/shoucan.png" mode="widthFix" />
						<view class="">收藏</view>
					</view>
					<view class="item">
						<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon109.png" mode="widthFix" />
						<view class="">分享</view>
					</view>
					<view class="item">
						<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon118.png" mode="widthFix" />
						<view class="">打赏</view>
					</view>
				</view>
				<view class="video-data">
					<view class="item" v-for="(item,index) in videoList" :key="index" @click="toVideoMain(item.id)">
						<image class="img" :src="item.coverImg?item.coverImg:(item.videoUrl+'?x-oss-process=video/snapshot,t_7000,f_jpg,m_fast')" mode="scaleToFill" />
						<view class="date">{{item.videoDuration}}</view>
						<view class="title">{{item.videoTitle}}</view>
						<view class="user-collent">
							<view class="user">
								<image class="avatar" :src="item.author.portrait ? item.author.portrait :'https://img1.baidu.com/it/u=1268603822,1552453616&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'" mode="widthFix" />
								<view class="text">{{item.author.userName}}</view>
							</view>
							<view class="collent">
								<uni-icons v-if="item.like == null" @tap.stop="giveVideoLike(item.id,index)" class="icon" color="#bcbcc4" type="heart" size="16"></uni-icons>
								<uni-icons v-else @tap.stop="cancelVideoLike(item.like,index)" class="icon"  type="heart" color="red" size="16"></uni-icons>
								{{item.likeCount}}
							</view>
						</view>
					</view>
				</view>
			</view>
		    <view v-if="tabIndex==2" class="c">
				 <view class="comment-data">
					 <view class="item" v-for="(item,index) in commentList" :key="index">
						 <view class="user">
							 <view class="left">
							 	<image class="avatar"  :src="item.portrait ? item.portrait : 'https://img0.baidu.com/it/u=1240550681,1913058023&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'" />
							 	<view>
									<view class="name">{{item.userName}}</view>
									<view class="date">{{item.createAt}}</view>
								</view>
							 </view>
							 <view class="btn" v-if="item.attention == 1">
							 	<!-- <uni-icons class="icon" color=" #2E2D2D" type="plusempty" size="12"></uni-icons> -->
							 	已关注
							 </view>
							 <view class="btn" v-else  @click="attenttion(item.userId)">
							 	<uni-icons class="icon" color=" #2E2D2D" type="plusempty" size="12"></uni-icons>
							 	关注
							 </view>
						 </view>
						 <view class="text"  @click="reply(1,item.id,item,index)">{{item.content}}</view>
						 
						 
						 
						 <view class="replyArea" v-show="item.replyList.length > 0">
							<view class="replyComment" @click="reply(2,item.id,item2,index)" v-for="item2 in item.foldReplyList">
								<view class="" style="display: flex;" v-if="item2.replyType == 1">
									<view class="replyUsername">{{item2.fromUname}}:</view>
									<view>
										 {{item2.content}}
									</view>
								 </view>
								 <view v-else class=""  style="display: flex;" @click="reply(2,item.id,item2,index)">
									 <view class="replyUsername">{{item2.fromUname}}
										 <view style="color: black;">回复</view>
										 {{item2.toUname}}:
									 </view>
									 <view>{{item2.content}}</view>
								 </view>
							</view>	 
							<view v-if="item.ifFold" class="replyUsername" @click="unFold(index)">查看更多回复</view>
						 </view>
									
									
									
											 
						  <view class="oper">
						  	<view class="item" @click="likeComment(item)">
						  		<image v-if="item.ifLike" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon115.png" mode="widthFix" />
								<image v-else class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon115_n.png" mode="widthFix" />
						  	{{item.likeCount}}
						  	</view>
						  	<view class="item" @click="disLikeComment(item)">
						  		<image v-if="item.ifDisLike" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon114.png" mode="widthFix" />
								<image v-else class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon114_n.png" mode="widthFix" />
						  		踩
						  	</view>
						  	<view class="item">
						  		<image @click="reply(1,item.id,item,index)" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon113.png" mode="widthFix" />
						  	{{item.replyList.length}}
						  	</view>
						  </view>
					 </view>
				 </view>
			</view>
		</scroll-view>
		<view class="fixed-comment comment" v-if="replyData.toUname">
			<input :placeholder="replyStr" v-model="replyData.content" id="rinput" @keyup.enter="sendReply" :focus="focus" />
			<view @click="sendReply()" class="btn">发送</view>
		</view>
		<view class="fixed-comment" v-else>
			 <input v-model="comment" placeholder="说说你的看法" :focus="focus"/>
			 <view @click="sendVideoComment()" class="btn">发送</view>
		</view>
		
		<!--全局悬浮-->
		<suspension types="toIndex,group"></suspension>
	</view>
</template>

<script>
import detailApi from '@/api/videoDetail.js';
import commonApi from '@/utils/commonMethod.js';

export default {
	data() {
		return {
			tabIndex:1,
			
			index: 1,
			isPlay: 1, //0.未播放  1.播放中
			videoId: '',//视频id
			video: {
				author:{},
			},//视频对象
			ifLike: false,//是否点赞
			ifCollect: false,//是否收藏
			ifJudged: false,//信息是否完善
			ifDisLike: false,//是否踩视频
			currentUser: '',//当前用户
			comment: '',//评论
			commentList: [],//评论列表
			replyData: {commentId: '', replyType: '', toUid: '', toUname: ''},//回复传递的对象
			attentionFlag: true,//是否收藏
			author: '',//视频作者
			isGiveTip: false,//打赏
			isTopUp: false,//充值
			tipMoney: '',//打赏金额
			videoList: [],//视频列表
			replyStr: '回复',
			isShowFriend: false,
			tagList: [],
			focus: false,
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		};
	},
	onLoad(options) {
		this.videoId = options.id;
		
		
	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	async mounted() {
		const currentUser = await commonApi.currentUserAxios();
		this.currentUser = currentUser.data.session_user_h5;
		await this.browseHistory();
		await this.getVideoInfoByLogin();
		this.getVideoList();
		this.getVideoComment();
		
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.share_url = currentPage.$page.fullPath
	},
	// watch(){
	// 	replyData: function (val) {
	// 		if (this.content.length > 0) {
	// 			this.replyStr = '';
	// 		}
	// 	}
	// },
	onShareAppMessage: function () {//分享
		return {
			title: this.video.videoTitle,
      path: this.share_url + "&sourceUserId=" + uni.getStorageSync("userId"),
			desc: '@' + this.video.author.userName + '在金诺云展发布了视频，欢迎大家来围观',
			imageUrl: this.video.videoUrl + '?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast',
			success: function (res) {
				console.info(res + '成功');
				wx.showToast({
					title: '分享成功',
				})
				// 转发成功
			},
			fail: function (res) {
				console.log(res + '失败');
				// 转发失败
			},
		 
		}
	 },
	/*分享朋友圈 */
	onShareTimeline: function() {
		return {
			title: this.video.videoTitle,
      query: 'id=' + this.videoId + '&sourceUserId=' + uni.getStorageSync("userId"),
			imageUrl: this.video.videoUrl + '?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast',
		}
	},
	methods: {
		saveFootPrint(stayTime){
			commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.share_url,"视频详情")
			
		},
		goTagNews(item) {
			uni.navigateTo({
				url:'/pages/product/tag/tagNewsList?activeIndex=2&tagId=' + item.id,
				
			})
			// window.location.href = '/h5/tagNewsList.html?activeIndex=3&tagId=' + item.id;
		},
		videoCanplay() {
			this.page = 2;
			this.isPlay = 0;
		},
		/**
		 * 判断用户是否登陆
		 */
		// ifLogin() {
		// 	const self = this
		// 	const result = toRegistered(self.currentUser.type)
		// 	if (!result) {
		// 		return
		// 	}
		// },
		/**
		 * 记录视频浏览记录
		 */
		async browseHistory() {
			detailApi.browseHistory(this.currentUser.id,this.videoId).then(res =>{
				
			})
		},
		/**
		 * 获取当前视频信息与当前用户与视频的互动
		 */
		async getVideoInfoByLogin(){
			detailApi.getVideoInfoByLogin(this.videoId).then(res =>{
				this.video = res.data.video;
				if(this.video.like){
					this.ifLike = true;
				}
				if(this.video.collect){
					this.ifCollect = true;
				}
				if(this.video.attention){
					this.attentionFlag = false;
				}
				if(this.video.author){
					this.author = this.video.author
				}
				if(this.video.tagList){
					for(let i = 0;i < this.video.tagList.length;i++){
						this.video.tagList[i].tagName = '#' + this.video.tagList[i].tagName;
					}
					this.tagList = this.video.tagList;
				}
			});
		},
		
		/**
		 * 获取视频列表
		 */
		getVideoList() {
			detailApi.getVideoList(11,this.tagList).then(res =>{
				res.data.page.list.forEach((value,index,array) =>{
					if(value.videoDuration){
						value.videoDuration = commonApi.formatDurantion(value)
					}
					if (value.id == this.videoId) {
						array.splice(index, 1)
					}
				})
				
				this.videoList = res.data.page.list;
				if(res.data.page.totalCount < 11){
					let num = 11 - res.data.paeg.totalCount;
					detailApi.getVideoList(num,null).then(res =>{
						res.page.list.forEach((value,index,array) =>{
							if(value.videoDuration){
								value.videoDuration = commonApi.formatDurantion(value)
							}
							if(value.id = this.videoId){
								array.splice(inedx,1)
							}
						})
						this.videoList = [...this.videoList,...res.data.page.list]
					})
				}
			})
		},
		//跳转到视频页面
		toVideoMain(id) {
			uni.redirectTo({
				url:'/pages/product/vidoDetail/vidoDetail?id=' + id
			})
		},
		/**
		 * 点赞视频
		 */
		like() {
			if(this.ifDisLike){
				this.cancelDisLike();
			}
			detailApi.saveCollect(this.currentUser.id,5,this.videoId).then(res =>{
				this.ifLike = true;//是否点赞
				this.video.like = res.data.collection;
				this.video.likeCount++;
			})
			
		},
		/**
		 * 取消点赞
		 */
		cancelLike() {
			detailApi.cancelCollect(this.video.like.id).then(res =>{
				this.ifLike = false;//是否点赞
				this.video.likeCount--;
			})
		},
		/**
		 * 踩视频
		 */
		disLike() {
			if(this.ifLike){
				this.cancelLike();
			}
			detailApi.saveCollect(this.currentUser.id,7,this.videoId).then(res =>{
				this.ifDisLike = true;//是否点踩
				this.video.disLike = res.data.collection;
			})
		},
		/**
		 * 取消踩视频
		 */
		cancelDisLike() {
			detailApi.cancelCollect(this.video.disLike.id).then(res =>{
				this.ifDisLike = false;//是否点踩
				this.video.disLike = res.data.collection;
			})
		},
		/**
		 * 收藏视频
		 */
		collectVideo() {
			detailApi.saveCollect(this.currentUser.id,6,this.videoId).then(res =>{
				this.video.collect = res.data.collection
				this.ifCollect = true; //是否收藏
			})
		},
		/**
		 * 取消收藏视频
		 */
		cancelCollectVideo() {
			detailApi.cancelCollect(this.video.collect.id).then(res =>{
				this.ifCollect = false;
			})
		},
		/**
		 * 发送评论
		 */
		async sendVideoComment() {
			// const result = await judgeIfPhone()
			// if (!result) {
			// 	return
			// }
			//判断是否登录
			this.register = await commonApi.getUserLoginFlag();
			if (this.register) {
			  uni.redirectTo({
			    url: '/pages/account/login/login',
			  })
			}
			
			if (!this.comment) {
				uni.showModal({
					title: "提示",
					content: "评论不能为空",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return
			}
			var that = this
			uni.login({
				provider: 'weixin', //使用微信登录获取code
				success: function (loginRes) {
					//使用微信code获取openid
					commonApi.getOpenId(loginRes.code).then(res => {
						commonApi.msgSecCheck(that.comment,2,res.data.openid).then(response =>{
							if(response.data.result.result.label == 100){
								// self.ifLogin();
								commonApi.sendComment(that.currentUser.id,that.comment,that.videoId,3).then(res =>{
									that.getVideoComment();
									that.index = 2;
									that.comment = '';
								})
							}else{
								uni.showModal({
									title: "提示",
									content: "内容审核未通过",
									showCancel:false,
									success: function (res) {
										that.comment = ""
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								
							}
						})
					})
				}
			})
		},
		/**
		 * 加载页面时获取评论,折叠评论,如果有传递index值,该评论不折叠
		 */
		getVideoComment(unFoldIndex) {
			commonApi.getComment(this.videoId,this.currentUser.id,'video').then(res =>{
				res.data.list.forEach((value,index,array) =>{
					//如果该评论的回复数量大于3，则只显示三条，并且显示查看更多回复
					if(unFoldIndex != index && value.replyList.length > 3){
						value.ifFold = true;
						value.showSize = 3;
						value.foldReplyList = value.replyList.slice(0,3);
					}else{
						//如果该评论的回复数量小于等于3则显示所有回复
						value.isFold = false;
						value.foldReplyList = value.replyList;
					}
					this.commentList = res.data.list;
				})
			})

		},

		/**
		 * 展开评论,每次点击展开3条
		 */
		unFold(index) {
			let size = this.commentList[index].showSize + 3
			this.commentList[index].showSize = size
			this.commentList[index].foldReplyList = this.commentList[index].replyList.slice(0, size)
			if (size >= this.commentList[index].replyList.length) {
				this.commentList[index].ifFold = false
			}
			this.$forceUpdate()
		},
		/**
		 * 点赞评论/取消点赞
		 */
		likeComment(item) {
			const self = this;
			// self.ifLogin();
			// if (item.ifDisLike) {
			// 	self.disLikeComment(item)
			// }
			if (!item.ifLike) {	
				detailApi.saveCollect(self.currentUser.id,8,item.id).then(res =>{
					self.video.collect = res.data.collection;
					self.commentList.forEach((value,index,array) =>{
						if(value.id == item.id){
							value.like = res.data.collection;
							value.ifLike = true;
							value.likeCount++
						}
					})
				})
			}else{
				detailApi.cancelCollect(item.like.id).then(res =>{
					self.video.collect = res.data.collection;
					self.commentList.forEach((value,index,array) =>{
						if(value.id == item.id){
							value.ifLike = false;
							value.likeCount--;
						}
					})
				})
			}
		},
		/**
		 * 踩评论/取消踩
		 */
		disLikeComment(item) {
			const self = this;
			// self.ifLogin();
			// if (item.ifLike) {
			// 	self.likeComment(item)
			// }
			if (!item.ifDisLike) {
				detailApi.saveCollect(self.currentUser.id,9,item.id).then(res =>{
					self.video.collect = res.data.collection;
					self.commentList.forEach((value, index, array) => {
						if (value.id == item.id) {
							value.disLike = res.data.collection;
							value.ifDisLike = true
						}
					})
				})
			}else{
				detailApi.cancelCollect(item.disLike.id).then(res =>{
					self.video.collect = res.data.collection;
					self.commentList.forEach((value, index, array) => {
						if (value.id == item.id) {
							value.ifDisLike = false
						}
					})
				})
					
			}
		},
		/**
		 * 回复评论
		 */
		async reply(replyType, commentId, target, index) {
			
			//判断是否登录
			this.register = await commonApi.getUserLoginFlag();
			if (this.register) {
			  uni.redirectTo({
			    url: '/pages/account/login/login',
			  })
			}
			
			// self.ifLogin();
			this.replyData.content = '';
			this.replyData.commentId = commentId;
			this.replyData.replyType = replyType;
			this.replyData.commentIndex = index;
			this.replyData.fromUid = this.currentUser.id;
			this.replyData.fromUname = this.currentUser.userName;

			switch (replyType) {
				//回复评论
				case 1:
					this.replyData.replyId = 0;
					this.replyData.toUid = target.userId;
					this.replyData.toUname = target.userName;
					break;
				//回复别人的回复
				case 2:
					this.replyData.replyId = target.id;
					this.replyData.toUid = target.fromUid;
					this.replyData.toUname = target.fromUname;
					break;
				default:
					break;
			}
			this.replyStr = '回复' + this.replyData.toUname;
			//获取焦点
			this.focus = true;
			// this.$refs.comment.focus();
			// self.$nextTick(() => {
			// 	document.getElementById("rinput").focus();
			// })

		},
		/**
		 * 发送回复
		 */
		sendReply() {
			// const result = await judgeIfPhone()
			// if (!result) {
			// 	return
			// }
			// self.ifLogin();
			if (this.replyData.content.trim() == '') {
				uni.showModal({
					title: "提示",
					content: "评论不能为空",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			detailApi.replyVideoCommnet(this.replyData).then(res =>{
				this.replyData.content = '';
				this.replyData.toUname = '';
				this.getVideoComment(this.replyData.commentIndex);
			})
		},
		/**
		 * 播放视频
		 */
		// playVideo() {
		// 	document.getElementById("video").play();
		// 	this.isPlay = 1;
		// },
		/**2023-04-13 到这里
		 *  关注作者
		 */
		attentionAuth() {
			// self.ifLogin();
			commonApi.subscriptionOrNot(this.video.userId.toString(),this.attentionFlag).then(res =>{
				this.attentionFlag = !this.attentionFlag;
			})
		},
		//关注评论
		attenttion(userId){
			commonApi.subscriptionOrNot(userId.toString(),true).then(res =>{
				for (let i = 0; i < this.commentList.length; i++) {
					if (this.commentList[i].userId == userId) {
						this.commentList[i].attention = 1;
					}
				}
			})
		},
		/**
		 * 视频播放结束
		 */
		videoEnded() {
			this.isPlay = 0;
		},
		/**
		 * 打赏
		 */
		// async giveTip() {
		// 	const self = this;
		// 	const result =  await judgeIfPhone()
		// 	if(!result){
		// 		return;
		// 	}
		// 	self.ifLogin();
		// 	if (!self.tipMoney) {
		// 		layer.open({
		// 			anim: '提示',
		// 			content: '请输入打赏金额',
		// 			btn: ['确定'],
		// 			yes: function (index) {
		// 				layer.closeAll()
		// 			},
		// 		});
		// 	}
		// 	axios.put("/h5/nocliveroomgift/giveTip", {
		// 		videoId:self.videoId,
		// 		authorId: self.video.author.id,
		// 		tipMoney: self.tipMoney,
		// 	}).then(async res => {
		// 		self.tipMoney = '';
		// 		if (res.data.code === 0) {
		// 			self.isGiveTip = false;
		// 			const currentUser = await getCurrentUser();
		// 			this.currentUser = currentUser.data.session_user_h5;
		// 			layer.open({
		// 				anim: '提示',
		// 				content: '打赏成功',
		// 				btn: ['确定'],
		// 				yes: function (index) {
		// 					layer.closeAll()
		// 				},
		// 			});
		// 		} else {
		// 			if (res.data.errorCode === "501") {
		// 				//todo 账户余额不足,请充值,刷新账户
		// 				const currentUser = await getCurrentUser();
		// 				this.userInfo = currentUser.data.session_user_h5;
		// 				layer.open({
		// 					anim: '提示',
		// 					content: '余额不足,请去个人中心充值',
		// 					btn: ['确定', '取消'],
		// 					yes: function (index) {
		// 						window.location.href = "/h5/personalcenter/myGold.html"
		// 					},
		// 					no: function (index) {
		// 						layer.close(index);
		// 						self.isGiveTip = false
		// 					}
		// 				});
		// 			} else if (res.data.errorCode == "502") {
		// 				layer.open({
		// 					anim: '提示',
		// 					content: res.data.msg,
		// 					btn: ['确定'],
		// 					yes: function (index) {
		// 						self.fisGiveTip = false;
		// 						layer.close(index)
		// 					}
		// 				});
		// 			}
		// 		}
		// 	})
		// },
		// changeTipMoney(e) {
		// 	const self = this;
		// 	e.target.value = e.target.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
		// 	e.target.value = e.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
		// 	e.target.value = e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
		// 	e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两位小数
		// 	if (e.target.value.indexOf(".") < 0 && e.target.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		// 		e.target.value = parseFloat(e.target.value);
		// 	}
		// 	self.tipMoney = e.target.value;
		// },
		/**
		 * 跳转到个人主页
		 */
		toPersonHome(userId) {
			console.log(this.video.author);
			console.log(userId);
			uni.redirectTo({
				url:'/pages/product/showroom/showroom?userId='+ userId
			})
		},
		/**
		 * 关注评论用户
		 */
		attention(userId) {
			commonApi.subscriptionOrNot(userId,'true').then(res =>{
				for(let i = 0;i < this.commentList.length;i++){
					if(this.commentList[i].userId == userId){
						this.commentList[i].attention = 1;
					}
				}
			})
			
		},

		updateShareCount() {
			this.isShowFriend = false
			//todo 保存分享记录

		},
		// goTagNews(item) {
		// 	window.location.href = '/h5/tagNewsList.html?activeIndex=2&tagId=' + item.id;
		// },
		//视频列表中视频点赞
		giveVideoLike(id, index){
			// if(vm.currentUser.type == 3){
			// 	window.location.href = '/h5loginByCaptcha.html'
			// }else {
			detailApi.saveCollect(this.currentUser.id,5,id).then(res =>{
				this.videoList[index].like = res.data.collection;
				this.videoList[index].likeCount++;
			})
			// }
		},
		//视频取消点赞
		cancelVideoLike(like, index){
			detailApi.cancelCollect(like.id).then(res =>{
				this.videoList[index].like = null;
				this.videoList[index].likeCount--;
			})
		},
	}
};
</script>

<style lang="scss">
.head {
	position: relative;
	z-index:3;
	background: #fff;
	box-shadow: 0px 0px 10rpx #ddd;
	.video {
		width: 100%;
	}
	.tabs {
		display: flex;

		font-size: $font-size-max;
		justify-content: space-between;

		.tab {
			width: 50%;
			text-align: center;
			border-bottom: 4rpx solid #fff;
			view {
				line-height: 70rpx;
				display: inline-block;
				margin-bottom: -3rpx;
				text {
					color: $text-color-grey;
				}
			}
		}
		.active {
			color: $color-primary;
			view {
				border-bottom: 4rpx solid $color-primary;
				text {
					color: $color-primary;
				}
			}
		}
	}
}
.scroll-view {
	height: calc(100% - 538rpx);
	.c {background-color: #fff;
		padding: $interval $interval 0rpx;
	
	}
	.user {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: $interval;
		.left {
			display: flex;
			align-items: center;
			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
			.name {
				color: #5a75a0;
			}
		}
		.btn {
			width: 116rpx;
			height: 52rpx;
			background: #f63737;
			border-radius: 26rpx;
			color: #fff;
			font-size: $font-size-min;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.btn1 {
			height: 50rpx;
			color: #a1a0a0;
			background: none;
			border: 1rpx solid #a1a0a0;
		}
	}
	
	.video-title {
		background-color: #fff;
	}
	.video-num {
		background-color: #fff;
		color: $text-color-grey;
		font-size: $font-size-min;
		padding-top: -10 + $interval-min;
	}

	.tags {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.t {
			margin-top: $interval-min;
			padding: 0px $interval-min;
			line-height: 48rpx;
			background: #eef8f9;
			border-radius: 8rpx;
			color: #1e9184;
			margin-right: 16rpx;
			font-size: $font-size-min;
		}
	}
	.oper{
		padding-top: $interval;
		padding-bottom: $interval-min;
			display: flex;
			justify-content: space-between;
		.item{
			text-align: center;
			
			font-size: $font-size-min;
			.img{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.video-data {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: $bg-color;
		
		margin:0px -1*$interval;
		padding: 18rpx $interval-min 100rpx;
		.item {
			width: 48.5%;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			background-color: #fff;
			margin-bottom: 18rpx;
			.img {
				width: 100%;
			}
			.date {
				position: absolute;
				left: 0px;
				top: 0px;
				color: #fff;
				border-bottom-right-radius: 15rpx;
				font-size: $font-size-min;
				text-align: center;
				width: 100rpx;
				padding: 10rpx 0px;
				background: rgba(0, 0, 0, 0.5);
			}
			.title {
				padding: 0px 20rpx;
				margin: 15rpx 0px 20rpx;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				height: 75rpx;
				-webkit-box-orient: vertical;
		
				// padding: 0px $interval-min;
				// margin: 15rpx 0px 20rpx;
			}
			.user-collent {
				padding: 0px $interval-min;
				color: #bcbcc4;
				display: flex;
				padding-bottom: 10rpx;
				align-items: center;
				justify-content: space-between;
				.user {
					display: flex;
					align-items: center;
					width: 70%;
					padding-bottom: 0px;
	
					.avatar {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 15rpx;
					}
					.text {
						flex: 1;
						width: 0;
						white-space: nowrap;
						overflow: hidden; //文本超出隐藏
						text-overflow: ellipsis; //文本超出省略号替代
					}
				}
				.collent {
					display: flex;
					align-items: center;
					.icon {
					}
				}
			}
		}
	}
    
	.comment-data{
		margin-top: -1*$interval;
		padding-bottom: 100rpx;
		background-color: $bg-color;
		>.item{
			margin: 0px -1*$interval;
			padding: $interval $interval 0px;
			background-color: #fff;
			border-bottom: 10rpx solid $bg-color;
		}
		.user{
			.left{
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.name {
					color: #5a75a0;
				}
				.date{
					font-size:$font-size-min;
				}
			}
			.btn{
				color: $text-color;
				background: none;
			}
			
		}
		.text{
			padding-left: 80rpx;
		}
		.oper{
			padding-left: 80rpx;
			.item{
				display: flex;
				align-items: center;
				.img{
					margin-right: 10rpx;
				}
			}
		}
	}
}


.fixed-comment{
	height: 100rpx;
	background-color: #fff;
	z-index: 3;
	width: 100%;
	position: fixed;
	left:0px;
	bottom:0px;
	display: flex;
	align-items: center;
	input{
		height: 60rpx;
		border-radius: 30rpx;
		flex: 1;
		padding-left: $interval;
		background-color: $bg-color;
		margin-left: $interval;
		font-size: 24rpx;
	}
	.btn{
		line-height: 60rpx;
		border-radius: 30rpx;
		padding: 0px $interval;
		color: #fff;
		margin:0px $interval;
		background-color: $color-primary;
	}
}
.replyComment{
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: flex-start;
	font-size: 13px;
	margin-top: 0.2rem;
	
}
.replyUsername{
    color: #5b6c98;
	display: flex;
}
.replyArea{
	background-color: #f5f5f5;
	margin-left: 100rpx;
}
</style>
